<template>
    <div class="form-box">
        <h3>用户注册</h3>
        <el-form ref="form" v-bind:model="form" v-bind:rules="rules" label-width="80px">
            <el-form-item label="邮箱" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
                <el-row type="flex">
                    <el-input v-model="form.yanzheng" style="margin-right: 10px"></el-input>
                    <el-button round @click="send">发送验证码</el-button>
                </el-row>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="realName">
                <el-input v-model="form.realName"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="telephoneNumber">
                <el-input v-model="form.telephoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="identityNumber">
                <el-input v-model="form.identityNumber"></el-input>
            </el-form-item>
            <el-form-item label="户口地区" prop="area">
                <el-input v-model="form.area"></el-input>
            </el-form-item>
            <el-form-item  label="出生日期" prop="date">
                <el-date-picker
                        v-model="form.date"
                        type="date"
                        placeholder="选择日期查询">
                </el-date-picker>
            </el-form-item>
            <el-form-item class="flex-btn">
                <el-button type="primary" @click="onSubmit('form')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
    name: "Register",
    data() {
        return {
            upLoadClicktag : 0,
            form: {
                username: '1970475803@qq.com',
                yanzheng: '',
                password: '123456',
                realName: '羊居原',
                telephoneNumber:'13134234243',
                identityNumber:'214233656421434',
                area:'东莞',
                date:'2021-09-05'
            },
            rules: {
                username: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'}
                ],
                password:[
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 3, max: 20, message: '密码长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                realName: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 3, max: 20, message: '学号长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                telephoneNumber:[
                    {required: true, message: '请输入手机号码', trigger: 'blur'},
                    {min: 11, max: 11, message: '11位手机号码', trigger: 'blur'}
                ],
                identityNumber:[
                    {required: true, message: '请输入身份证号', trigger: 'blur'},
                    {min: 3, max: 20, message: '输入身份证号', trigger: 'blur'}
                ],
                area:[
                    {required: true, trigger: 'blur'},
                ],
                date:[
                    {required: true, trigger: 'blur'},
                ]
            }

        }
    },
    methods:{
        send(){
            var vm = this;
            //第一次进来为true
            if(vm.upLoadClicktag===0){
                //改版变量
                vm.upLoadClicktag = 1;
                //此处写你要做的事情，操作DOM，发送ajax请求等等。
                if(vm.form.username === ''){
                    vm.$message.error('请正确填写邮箱');
                }else {
                    this.axios({
                        url: '/myapi/user/registerSendCode',
                        method: 'post',
                        //使用data是body传参，使用params是query传参
                        data: {
                            email: vm.form.username
                        }
                    }).then(function (response) {
                        if(response.data.success===true){
                            vm.$message({
                                message: '邮箱验证码已发送，注意查收!',
                                type: 'success'
                            });
                        }
                        else {
                            vm.$message.error('邮箱已经注册或邮箱不存在');
                        }
                    });
                }
                //30秒过后可以再次点击
                setTimeout(function () { vm.upLoadClicktag = 0 }, 30000);
            }else{
                alert('请勿频繁操作！');
            }


        },
        handleChange() {
            var loc = "";
            for (let i = 0; i < this.selectedOptions.length; i++) {
                loc += CodeToText[this.selectedOptions[i]];
            }
            alert(loc);
        },
        onSubmit:function (formName){
            var vm = this;
            console.log(vm.form);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //表单格式验证成功，接入腾讯防水墙进行图形验证码验证
                    this.axios({
                        url: '/myapi/user/addUser',
                        method: 'post',
                        //使用data是body传参，使用params是query传参
                        data: {
                            code: vm.form.yanzheng,
                            password: vm.form.password,
                            uname: vm.form.realName,
                            unickame: '',
                            uphone: vm.form.telephoneNumber,
                            uidcard: vm.form.identityNumber,
                            ubirthday: vm.form.date,
                            uplace: vm.form.area,
                            email: vm.form.username
                        }
                    }).then(function (response) {
                        if(response.data.success === true){
                            vm.$message({
                                message: '注册成功!',
                                type: 'success'
                            });
							vm.$router.push("Login");
                        }
                        else {
                            vm.$message.error('注册失败!');
                        }
                    });

                } else {
                    console.log('error submit!!');
                    this.$message.error('请输入正确的格式');
                    return false;
                }
            });
        }
        ,toLoginComponent:function () {
            this.$router.push("/login")
        }
    }
}
</script>

<style scoped>
.form-box{
    width: 500px;
    height: 750px;
    margin: 50px auto;
    padding: 10px 50px 20px 20px;

}
.flex-btn{
    float: left;
}
</style>
